<template>
  <div class="slid">
    <div>
      <a class="font1">京东秒杀</a>
      <a class="font2">
        <div class="clock"><span>{{clock1}}点场</span></div>
        <!-- <div class="hour">{{hour}}</div> -->
        <!-- <span class="point">:</span> -->
        <div class="hour">{{minute}}</div>
        <span class="point">:</span>
        <div class="hour">{{seconed}}</div>
      </a>
      <a class="morep">更多秒杀<i class="more-icon"></i></a>
    </div>
    <div class="scrollx">
      <ul class="item-ul" ref="itemLength" :style="{width: slideWidth + 'px'}">
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t1/1422/9/8371/234410/5baa0412E86b7a00e/1cf0da2d95fc4e88.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t28696/337/161378914/196789/7836e527/5be9a14eN81c8b76c.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t1/3041/5/66/189835/5b8f3576E7bd4dc99/09d1cc83b3b8334f.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t27445/146/1626366057/281672/4da7c8c7/5be968bdNa3378f08.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t23074/93/2518201208/227661/ba7adae9/5b83746eN1b8e6ce0.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t5221/359/1529315661/144836/ff158d42/591165e3Nbb83cc16.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t1/1422/9/8371/234410/5baa0412E86b7a00e/1cf0da2d95fc4e88.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t28696/337/161378914/196789/7836e527/5be9a14eN81c8b76c.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t1/3041/5/66/189835/5b8f3576E7bd4dc99/09d1cc83b3b8334f.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t27445/146/1626366057/281672/4da7c8c7/5be968bdNa3378f08.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t23074/93/2518201208/227661/ba7adae9/5b83746eN1b8e6ce0.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
        <li class="item">
          <div class="item-img"><img src="//img14.360buyimg.com/n1/s200x200_jfs/t5221/359/1529315661/144836/ff158d42/591165e3Nbb83cc16.jpg.dpg" alt=""></div>
          <div class="item-pric">￥1849</div>
          <div class="item-pric2">￥1999</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeSlide',
  data () {
    return {
      clock1: '',
      minute: '',
      seconed: '',
      slideWidth: ''
    }
  },
  methods: {
    clock2 () {
      var oclock = new Date()
      this.clock1 = oclock.getHours()
      var min1 = 60 - oclock.getMinutes()
      var sced1 = 60 - oclock.getSeconds()
      this.minute = min1 < 10 ? '0' + min1 : min1
      this.seconed = sced1 < 10 ? '0' + sced1 : sced1
    },
    now () {
      setInterval(() => {
        this.clock2()
      }, 1000)
    },
    slideWidth1 () {
      var iteml2 = this.$refs.itemLength.children.length
      this.slideWidth = iteml2 * 84
      // console.log(this.slideWidth)
    }
  },
  mounted () {
    this.now()
    this.slideWidth1()
  }
}
</script>

<style lang="stylus" scoped>
  .slid
    margin-top .2rem
    .font1
      font-size .34rem
      color #f02b2b
      font-weight 700
      font-family '宋体'
      margin-left .1rem
    .clock
      font-size: 12px
      color: #232326
      font-weight: 700
      display: inline-block
    .hour
      width: 18px
      line-height: 17px
      color: #232326
      font-size: 12px
      position: relative
      display: inline-block
    .hour:after
      border-radius: 2px
      height: 200%
      content: ""
      width: 200%
      border: 1px solid #dfdfdf
      position: absolute
      top: -1px
      left: -1px
      -webkit-transform: scale(.5)
      transform: scale(.5)
      -webkit-transform-origin: left top
      transform-origin: left top
      z-index: 10
    .morep
      display: inline-block
      color: #f23030
      float: right
      font-size: 10px
      text-align: right
      position: relative
      padding-right: 22px
      .more-icon
        display: inline-block
        width: 12px
        height: 12px
        background: url(//wq.360buyimg.com/fd/h5/wxsq_dev/m_jd_index/images/index/arrow_rt.png) no-repeat
        background-size: cover
        position: absolute
        right: 8px
    .point
      display: inline-block
      line-height: 16px
      height: 16px
      font-size: 12px
      text-align: center
      color: #232326
  .scrollx
    overflow-x scroll
    margin-top .1rem
    .item-ul
      width 10rem
      transition: all 0.3s ease 0s
      .item
        width 1.6rem
        display inline-block
        .item-img
          display inline-block
        .item-img img
          width 100%
        .item-pric
          margin-top: 10px
          display: block
          color: #f23030
          font-size: 16px
          line-height: 16px
          height: 16px
          text-align: center
          font-weight: 700
        .item-pric2
          color: #686868
          font-size: 12px
          line-height: 12px
          margin: 4px 0 11px
          text-align: center
          padding: 0 2px
          text-decoration line-through
</style>
